<template>
	<div class="login-page">
		<view class="guide-wrap" v-if="nextIndex == 0">
			<div class="logos">
				<swiper :autoplay="true" :interval="3000" :duration="1000" @change="onChangeSwiper">
					<swiper-item v-for="(item,index) in list">
						<view class="swiper-item">
							<image :src="item.icon" mode=""></image>
							<span>{{item.title}}</span>
						</view>
					</swiper-item>
				</swiper>
				<div class="indicator-dots">
					<div :class="{'dot': true, 'active': index == indicator_active}" v-for="(item,index) in list"></div>
				</div>

				<div class="tips">
					<div @click.stop="isCheckbox = !isCheckbox" :class="{'checkbox-ed' : isCheckbox, 'checkbox': true}">
					</div>
					<p @click.stop="isCheckbox = !isCheckbox">我已阅读并同意<navigator url="/pages/index/tipsDetail?type=0">
							《服务协议》</navigator>和<navigator url="/pages/index/tipsDetail?type=1">《隐私政策》</navigator>
					</p>
				</div>
				<SSButton @click="nextLogin" class="guide-btn" title="微信一键登录" />
			</div>
		</view>
		<view class="login-wrap" v-else>
			<div class="logo">
				<image src="../../static/image/logo.png" mode=""></image>
				<p>IT领域求职招聘领导者</p>
			</div>
			<div class="identity">
				<button :class="{'active': identity == 1}" @click="identity = 1">我是牛人</button>
				<button :class="{'active': identity == 2}" @click="identity = 2">我是企业</button>
			</div>
			<button class="login-btn" @click="onClickLogin" withCredentials="true">下一步</button>
		</view>

	</div>

</template>

<script>
	import SSButton from '@/components/Button.vue'
	export default {
		components: {
			SSButton
		},
		data() {
			return {
				nextIndex: 0, // 0 - 引导页面 1 - 登录页面
				indicator_active: 0,
				list: [{
						icon: require('../../static/image/cover-1.png'),
						title: '得到你梦想的工作'
					},
					{
						icon: require('../../static/image/cover-2.png'),
						title: '方便在您随时方便使用'
					},
					{
						icon: require('../../static/image/cover-3.png'),
						title: '轻松管理简历'
					}
				],

				identity: 1, // 身份： 1 牛人 2 企业
				infoRes: null,
				isCheckbox: false
			};
		},
		onLoad() {
			wx.hideHomeButton()
		},
		methods: {
			onChangeSwiper({
				detail
			}) {
				this.indicator_active = detail.current
			},
			// 登录下一步
			nextLogin() {
				if (!this.isCheckbox) return uni.showToast({
					title: "请阅读协议条款后,同意条款",
					icon: 'none'
				})
				console.log("??")
				wx.getUserProfile({
					desc: "weixin",
					success: async (infoRes) => {
						console.log(infoRes)
						this.infoRes = infoRes
						this.nextIndex = 1

					},
					fail(res) {}
				})
			},
			// 登录
			async onClickLogin(e) {
				let nickName = this.infoRes.userInfo.nickName; //获取用户登录昵称
				let avatarUrl = this.infoRes.userInfo.avatarUrl; //获取用户头像

						let SUBSCRIBE_ID = '2lnbHTXqoVCVP9Eqnubq84F-TWL8F1wPWpXH4s1RYmE'
				wx.requestSubscribeMessage({
					tmplIds: [SUBSCRIBE_ID],
					success: async res => {
						console.log(res)
						if (res[SUBSCRIBE_ID] === 'accept') {
							const result = await this.$http.User.login(this.identity, nickName, avatarUrl)
							if (result) {

								this.getUnread()
								uni.reLaunch({
									url: '/pages/index/index'
								})
								uni.$LTLogin(String(result.id))

							}
						} else if (res[SUBSCRIBE_ID] === 'reject') {
							// 拒绝
						} else {
							wx.showToast({
								title: '授权订阅消息有误',
								icon: 'none'
							})
						}
					},
					fail(res) {
						console.log(res)
					}
				})



			},
			// 获取未读消息数量
			async getUnread() {
				const result = await this.$http.Message.unread()
				console.log(result.data.all)
				getApp().globalData.allUnread = result.data.all
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #fff;
	}

	.guide-wrap {
		.logos {
			padding-top: 212upx;
			position: fixed;
			top: 0%;
			bottom: 0;
			left: 0%;
			right: 0%;
			display: flex;
			align-items: center;
			flex-direction: column;

			swiper {
				height: 554upx;
				width: 100%;
			}

			.swiper-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 410upx;
					height: 454upx;
				}

				span {
					color: #28211F;
					font-size: 44upx;
					font-weight: 500;
					padding-top: 44upx;
				}
			}

			.indicator-dots {
				width: 100%;
				height: 16upx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 192upx;

				.dot {
					&.active {
						width: calc(16upx * 3);
						background: #2AABE2;
					}

					width: 16upx;
					height: 16upx;
					background-color: #CCCCCC;
					border-radius: 16upx;
					margin-left: 10upx;
				}
			}

			.tips {
				padding-bottom: 40upx;
				position: fixed;
				bottom: calc(88upx + 96upx);
				display: flex;
				align-items: center;

				.checkbox-ed {
					background: #2AABE2;
					border-color: #eee !important;
				}

				.checkbox {
					margin-right: 20upx;
					width: 30upx;
					height: 30upx;
					border-radius: 30upx;
					border: 5upx solid #ccc;
				}

				p {
					color: rgba(147, 147, 147, 1);
					font-size: 24upx;
					display: flex;
					align-items: center;

					navigator {
						color: #2AABE2 !important;
					}
				}
			}

			.guide-btn {
				bottom: 88upx;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
			}

		}



	}

	.login-wrap {
		.logo {
			width: 476upx;
			height: 268upx;
			margin: 0 auto;
			margin-top: 68upx;

			image {
				width: 100%;
				height: 100%;
				margin-left: -30upx;
			}

			p {
				font-size: 26upx;
				text-align: center;
				position: relative;
				z-index: 7;
				margin-top: -50upx;
			}


		}

		.identity {
			margin-top: 172upx;
			padding: 0 32upx;
			display: flex;
			flex-direction: column;

			button {
				width: 686upx;
				height: 192upx;
				line-height: 192upx;
				border-radius: 8upx;
				background: #fff;
				color: #2AABE2;
				font-size: 32upx;
				font-weight: 500;

				&:after {
					border-color: #2AABE2;
				}

				&:last-of-type {
					margin-top: 46upx;
				}

				&.active {
					background: #2AABE2;
					color: #fff;


				}
			}
		}

		.login-btn {
			position: fixed;
			bottom: 68upx;
			left: 50%;
			transform: translateX(-50%);
			padding: 0;
			width: 654upx;
			height: 96upx;
			line-height: 96upx;
			background: #2AABE2;
			color: #fff;
			font-size: 24upx;
			font-weight: 500;
			border-radius: 8upx;
			border-color: #2AABE2;

			&:active {
				filter: brightness(0.9);
			}
		}
	}
</style>
